DAY 9 - RWD 響應式網頁 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 9

自我挑戰組

前端開發 | 學習歷程系列第 9 篇

DAY 9 - RWD 響應式網頁

15th鐵人賽

Chris

團隊14倍的紅寶石

2023-09-24 20:41:05

485 瀏覽

分享至

大家好，我是一名菜鳥工程師，Chris，今天來到第 9 天，RWD 響應式網頁
想了想覺得一天一主題比較好，所以動畫效果就改到明天一起說吧

RWD (響應式網頁) :

在不同的設備和螢幕尺寸上，都能夠正常顯示與操作

- 使用Viewport Meta標籤：
在 HTML 文件的<head>區塊中添加以下程式碼，來確保網頁在裝置上，可以顯示正確的比例

<meta name="viewport" content="width=device-width, initial-scale=1.0">

- 流體佈局（Fluid Layout）:
使用百分比單位來設定元素的寬度，讓網頁根據螢幕尺寸和設備，自動調整大小，以達到不同螢幕尺寸的效果

header, footer {
  width: 100%;
}

- 媒體查詢（Media Queries）：
使用 CSS 媒體查詢來設定所需的螢幕寬度，並根據不同的螢幕寬度，套用不同的樣式

要做 RWD 網頁的樣式設計，我們可以先從手機開始，以下為範例，背景顏色在不同螢幕尺寸的樣式

HTML 設定：

<body>
  <div class="box"></div>
</body>

CSS 設定：
手機：由於是先從手機開始，所以直接設定希望的樣式

.box {
  background-color: green;
  width: 100%;
  height: 250px;
}

平板(直式)：通常會將螢幕寬度設定為大於或等於768px

@media screen and (min-width: 768px) {
  .box {
    background-color: yellow;
  }
}

平板(橫式)：通常會將螢幕寬度設定為大於或等於1024px

@media screen and (min-width: 1024px) {
  .box {
    background-color: orange;
  }
}

電腦：通常會將螢幕寬度設定為大於或等於1200px

@media screen and (min-width: 1200px) {
  .box {
    background-color: red;
  }
}

- 彈性圖像和媒體：
使用max-width: 100%;，讓內容在小螢幕上不會超出範圍

- 行動優先設計 (Mobile-First)：
使用行動優先設計方法，先設計和開發小螢幕的裝置，然後再依序設計大螢幕的樣式和功能

- 彈性的文字和字體大小:
使用相對單位（如em、rem）來設定文字和字體大小，來增加可讀性和縮放性

- 隱藏和重新排列元素：
使用CSS的display、visibility或order屬性，在不同設備上隱藏、重新排列或調整元素的顯示順序

1 假設有一個navbar，我希望在小螢幕上隱藏，可以使用display: none屬性

@media screen and (max-width: 767px) {
  .navbar {
    display: none;
  }
}

2 假設有兩個元素，一個在左側，一個在右側，我希望在小螢幕上將它們的順序交換，可以使用order屬性

.container {
  display: flex;
  flex-direction: row;
}

.left {
  order: 2; /* 設置為第二個順序 */
}

.right {
  order: 1; /* 設置為第一個順序 */
}

@media screen and (max-width: 767px) {
  .container {
    flex-direction: column;
  }
}

- 響應式圖像：
利用srcset和sizes屬性，讓圖像能夠適應不同螢幕的尺寸
使用圖像壓縮工具來優化圖像，來改善頁面載入性能

HTML 設定：

<img src="bear.jpg" alt="小熊" class="responsive-bear">

CSS 設定：

將圖片的最大寬度設置為100%，並讓高度自動調整，也確保圖片在不同尺寸的螢幕上能夠完整縮放
當螢幕寬度大於或等於768px時，將.responsive-bear的最大寬度設置為50%，這樣圖像會變大

.responsive-bear {
  max-width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .responsive-bear {
    max-width: 50%;
  }
}

- CSS 框架：
使用流行的CSS框架，如 Bootstrap、Tailwind CSS、Foundation等CSS 框架，來加快 RWD 的樣式設計
Bootstrap 網頁參考：https://getbootstrap.com/
Tailwind CSS 網頁參考：https://tailwindcss.com/
Foundation 網頁參考：https://get.foundation/

- 測試 :
使用不同瀏覽器以及裝置，來測試和調整 RWD

- JavaScript 設計：
在某些特定情形下，必須使用 JavaScript 來處理特定的 RWD，例如手機選單的彈出和隱藏

預告：明天的主題是動畫效果!!!